<template>
	<div class="app-container">
		<div class="filter-container">
			<!-- <el-select v-model="listQuery.companyLocation" style="width: 160px" class="filter-item" @change="handleFilter">
				<el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
			</el-select> -->
			<el-input v-model="listQuery.positionName" placeholder="职位名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
			<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
			<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">{{ $t('table.add') }}</el-button>
		</div>

		<el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
			<el-table-column label="职位ID" prop="id" align="center" width="65"></el-table-column>
			<el-table-column label="企业名称" prop="factory" align="center" :formatter="formatter"></el-table-column>
			<el-table-column label="职位名称" prop="positionName" align="center"></el-table-column>
			<el-table-column label="返费" prop="positionRefee" align="center"></el-table-column>
			<el-table-column label="推荐奖" prop="positionRecommend" align="center">
			</el-table-column>
			<el-table-column label="工价" prop="positionPrice" align="center"></el-table-column>
			<el-table-column label="薪资范围" prop="positionSalaryRange" align="center">
			</el-table-column>
			<el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button v-if="scope.row.status!='published'" size="mini" type="success" @click="goToDetail(scope.row)">查看</el-button>
					<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{ $t('table.edit') }}</el-button>
					<el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handelDelete(scope.row)">{{ $t('table.delete') }}
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList"/>

		<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="70%">
			<el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="100px">
				<el-card class="box-card row-box">
					<span class="row-title">基础信息</span>
					<el-form-item label="企业名称" prop="title">
						<el-select v-model="temp.company_id" class="filter-item" placeholder="请选择" style="width: 100%">
							<el-option v-for="item in enterpriseOptions" :key="item.key" :label="item.value" :value="item.key" />
						</el-select>
					</el-form-item>
					<el-form-item label="上线" prop="title">
						<el-select v-model="temp.positionsIsUp" class="filter-item" placeholder="请选择" style="width: 100%">
							<el-option v-for="item in isUpPosition" :key="item.key" :label="item.value" :value="item.key" />
						</el-select>
					</el-form-item>
					<el-form-item label="职位名称" prop="type">
						<el-input v-model="temp.positionName"/>
					</el-form-item>
					<el-form-item label="横幅" prop="type">
						<el-input v-model="temp.positionSkewBanner"/>
					</el-form-item>
					<el-form-item label="类型" prop="title">
						<el-select v-model="temp.positionType" class="filter-item" placeholder="请选择" style="width: 100%">
							<el-option v-for="item in typeOptions" :key="item.key" :label="item.value" :value="item.key" />
						</el-select>
					</el-form-item>
					<el-form-item label="标签" prop="type">
						<el-row style="padding-left: 10px;margin-bottom: 10px">
							<el-tag v-for="(tag, index) in checkList" :key="index" closable style="margin-right: 5px" @close="deleteSelectedTag(index)">{{tag}}</el-tag>
						</el-row>
						<el-button type="primary" @click="selectMark" v-show='!innerVisible'>展开标签库</el-button>
						<el-button type="primary" @click="selectMark" v-show='innerVisible'>收起标签库</el-button>
						<el-row v-show='innerVisible' style="margin-top: 10px;margin-left: 10px">
							<template>
								<el-checkbox-group v-model="checkList">
									<el-tag v-for="(item, index) in innerList" :key="index" style="margin-right: 5px" closable :disable-transitions="false" @close="deleteTag(item)">
										<el-checkbox :label="item.tagName" :key="item.tagName">
											{{item.tagName}}
										</el-checkbox>
									</el-tag>
									<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="addTag" @blur="addTag">
									</el-input>
									<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
								  </el-checkbox-group>
							</template>
						</el-row>
					</el-form-item>
					<el-form-item label="薪资范围" prop="type">
						<el-col :span="11">
							<el-input v-model="temp.min"/>
						</el-col>
						<el-col style="text-align: center;" :span="2">-</el-col>
						<el-col :span="11">
							<el-input v-model="temp.max"/>
						</el-col>
					</el-form-item>
					<el-form-item label="工价" prop="type">
						<el-input v-model="temp.positionPrice"/>
					</el-form-item>
					<el-form-item label="返费" prop="type">
						<el-input v-model="temp.positionRefee"/>
					</el-form-item>
					<el-form-item label="推荐费" prop="type">
						<el-input v-model="temp.positionRecommend"/>
					</el-form-item>
					<el-form-item label="年龄要求" prop="type">
						<el-input v-model="temp.positionAgeRange"/>
					</el-form-item>
					<el-form-item label="温馨提醒" prop="type">
						<tinymce :height="200" v-model="temp.positionTip" id='tinymcePosition1' :menubar="'false'" :showUpload="false"></tinymce>
					</el-form-item>
				</el-card>
				<el-card class="box-card row-box">
					<span class="row-title">薪资说明</span>
					<el-form-item label="发薪日" prop="type">
						<el-input v-model="temp.positionSalaryDay"/>
					</el-form-item>
					<el-form-item label="底薪" prop="type">
						<el-input v-model="temp.positionSalaryMin"/>
					</el-form-item>
					<el-form-item label="薪资结构" prop="type">
						<tinymce :height="200" v-model="temp.positionSalaryStructure" id='tinymcePosition2' :menubar="'false'" :showUpload="false"></tinymce>
					</el-form-item>
				</el-card>
				<el-card class="box-card row-box">
					<span class="row-title">食宿介绍</span>
					<el-form-item label="伙食" prop="type">
						<el-input type="textarea" v-model="temp.positionRabBoard"/>
					</el-form-item>
					<el-form-item label="住宿" prop="type">
						<el-input type="textarea" v-model="temp.positionRabRoom"/>
					</el-form-item>
					<el-form-item label="交通" prop="type">
						<el-input type="textarea" v-model="temp.positionRabTraffic"/>
					</el-form-item>
				</el-card>
				<el-card class="box-card row-box">
					<span class="row-title">合同说明</span>
					<el-form-item label="合同说明" prop="type">
						<el-input type="textarea" v-model="temp.positionContractDesc"/>
					</el-form-item>
					<el-form-item label="工资发放" prop="type">
						<el-input type="textarea" v-model="temp.positionContractSalary"/>
					</el-form-item>
					<el-form-item label="五险一金" prop="type">
						<el-input type="textarea" v-model="temp.positionContract5a1"/>
					</el-form-item>
				</el-card>
				<el-card class="box-card row-box">
					<span class="row-title">岗位状态</span>
					<el-form-item label="工作内容" prop="type">
						<el-input type="textarea" v-model="temp.positionContext"/>
					</el-form-item>
					<el-form-item label="工时说明" prop="type">
						<el-input type="textarea" v-model="temp.positionPriceDesc"/>
					</el-form-item>
					<el-form-item label="工作环境" prop="type">
						<el-input type="textarea" v-model="temp.positionWorkEnv"/>
					</el-form-item>
					<el-form-item label="体检信息" prop="type">
						<el-input type="textarea" v-model="temp.positionPhyInfo"/>
					</el-form-item>
					<el-form-item label="身份证复印件" prop="type">
						<el-input type="textarea" v-model="temp.positionIdCardPic"/>
					</el-form-item>
					<el-form-item label="毕业证" prop="type">
						<el-input type="textarea" v-model="temp.positionDiploma"/>
					</el-form-item>
					<el-form-item label="证件照" prop="type">
						<el-input type="textarea" v-model="temp.positionIdCard"/>
					</el-form-item>
					<el-form-item label="纹身" prop="type">
						<el-input type="textarea" v-model="temp.positionTattoo"/>
					</el-form-item>
					<el-form-item label="烟疤" prop="type">
						<el-input type="textarea" v-model="temp.positionSmokeScars"/>
					</el-form-item>
					<el-form-item label="英文字母" prop="type">
						<el-input type="textarea" v-model="temp.positionLetter"/>
					</el-form-item>
					<el-form-item label="简单算数" prop="type">
						<el-input type="textarea" v-model="temp.positionMath"/>
					</el-form-item>
					<el-form-item label="体内异物" prop="type">
						<el-input type="textarea" v-model="temp.positionHealthy"/>
					</el-form-item>
				</el-card>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
				<el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">{{ $t('table.confirm') }}</el-button>
			</div>
		</el-dialog>

		<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogDetailVisible">
			<el-form ref="dataDetail" :model="tempDetail" label-position="right" label-width="100px">
				<el-card class="box-card row-box">
					<span class="row-title">基础信息</span>
					<el-form-item label="企业名称" prop="title">
						<span>{{tempDetail.companyShowName}}</span>
					</el-form-item>
					<el-form-item label="职业名称" prop="type">
						<span>{{tempDetail.positionName}}</span>
					</el-form-item>
					<el-form-item label="类型" prop="title">
						<span>{{tempDetail.positionType | filterType}}</span>
					</el-form-item>
					<el-form-item label="状态" prop="title">
						<span>{{tempDetail.positionsIsUp | filterStatus}}</span>
					</el-form-item>
					<el-form-item label="横幅" prop="type">
						<span>{{tempDetail.positionSkewBanner}}</span>
					</el-form-item>
					<el-form-item label="标签" prop="type">
						<el-tag v-for="(item, index) in checkList" :key="index" style="margin-right: 5px">{{item}}</el-tag>
					</el-form-item>
					<el-form-item label="工价" prop="type">
						<span>{{tempDetail.positionPrice}}</span>
					</el-form-item>
					<el-form-item label="返费" prop="type">
						<span>{{tempDetail.positionRefee}}</span>
					</el-form-item>
					<el-form-item label="推荐费" prop="type">
						<span>{{tempDetail.positionRecommend}}</span>
					</el-form-item>
					<el-form-item label="年龄要求" prop="type">
						<span>{{tempDetail.positionAgeRange}}</span>
					</el-form-item>
					<el-form-item label="温馨提醒" prop="type">
						<span v-html="tempDetail.positionTip"></span>
					</el-form-item>
				</el-card>
				<el-card class="box-card row-box">
					<span class="row-title">薪资说明</span>
					<el-form-item label="综合薪资" prop="type">
						<span>{{tempDetail.positionSalaryRange}}</span>
					</el-form-item>
					<el-form-item label="发薪日" prop="type">
						<span>{{tempDetail.positionSalaryDay}}</span>
					</el-form-item>
					<el-form-item label="底薪" prop="type">
						<span>{{tempDetail.positionSalaryMin}}</span>
					</el-form-item>
					<el-form-item label="薪资结构" prop="type">
						<span v-html="tempDetail.positionSalaryStructure"></span>
					</el-form-item>
				</el-card>
				<el-card class="box-card row-box">
					<span class="row-title">食宿介绍</span>
					<el-form-item label="伙食" prop="type">
						<span>{{tempDetail.positionRabBoard}}</span>
					</el-form-item>
					<el-form-item label="住宿" prop="type">
						<span>{{tempDetail.positionRabRoom}}</span>
					</el-form-item>
					<el-form-item label="交通" prop="type">
						<span>{{tempDetail.positionRabTraffic}}</span>
					</el-form-item>
				</el-card>
				<el-card class="box-card row-box">
					<span class="row-title">合同说明</span>
					<el-form-item label="合同说明" prop="type">
						<span>{{tempDetail.positionContractDesc}}</span>
					</el-form-item>
					<el-form-item label="工资发放" prop="type">
						<span>{{tempDetail.positionContractSalary}}</span>
					</el-form-item>
					<el-form-item label="五险一金" prop="type">
						<span>{{tempDetail.positionContract5a1}}</span>
					</el-form-item>
				</el-card>
				<el-card class="box-card row-box">
					<span class="row-title">岗位状态</span>
					<el-form-item label="工作内容" prop="type">
						<span>{{tempDetail.positionContext}}</span>
					</el-form-item>
					<el-form-item label="工时说明" prop="type">
						<span>{{tempDetail.positionPriceDesc}}</span>
					</el-form-item>
					<el-form-item label="工作环境" prop="type">
						<span>{{tempDetail.positionWorkEnv}}</span>
					</el-form-item>
				</el-card>
				<el-card class="box-card row-box">
					<span class="row-title">其他信息</span>
					<el-form-item label="体检信息" prop="type">
						<span>{{tempDetail.positionPhyInfo}}</span>
					</el-form-item>
					<el-form-item label="身份证复印件" prop="type">
						<span>{{tempDetail.positionIdCardPic}}</span>
					</el-form-item>
					<el-form-item label="毕业证" prop="type">
						<span>{{tempDetail.positionDiploma}}</span>
					</el-form-item>
					<el-form-item label="证件照" prop="type">
						<span>{{tempDetail.positionIdCard}}</span>
					</el-form-item>
					<el-form-item label="纹身" prop="type">
						<span>{{tempDetail.positionTattoo}}</span>
					</el-form-item>
					<el-form-item label="烟疤" prop="type">
						<span>{{tempDetail.positionSmokeScars}}</span>
					</el-form-item>
					<el-form-item label="英文字母" prop="type">
						<span>{{tempDetail.positionLetter}}</span>
					</el-form-item>
					<el-form-item label="简单算数" prop="type">
						<span>{{tempDetail.positionMath}}</span>
					</el-form-item>
					<el-form-item label="体内异物" prop="type">
						<span>{{tempDetail.positionHealthy}}</span>
					</el-form-item>
				</el-card>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogDetailVisible = false">关闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		fetchPositionListAjax,
		addPositionAjax,
		delPositionAjax,
		updatePositionAjax,
		fetchPositionTagsAjax,
		delPositionTagsAjax,
		addPositionTagsAjax
	} from "@/api/position";

	import {
		fetchEnterPriseListAjax,
	} from "@/api/enterprise";
import waves from "@/directive/waves"; // Waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import tinymce  from '@/components/Tinymce'

const calendarTypeOptions = [
{ key: "CN", display_name: "China" },
{ key: "US", display_name: "USA" },
{ key: "JP", display_name: "Japan" },
{ key: "EU", display_name: "Eurozone" }
];

// arr to obj ,such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
	acc[cur.key] = cur.display_name;
	return acc;
}, {});

export default {
	name: "ComplexTable",
	components: {
		Pagination,
		tinymce
	},
	directives: { waves },
	filters: {
		filterType(val) {
			var typeOptions = [{
				key: '0',
				value: '高返费'
			}, {
				key: '1',
				value: '小时工'
			}, {
				key: '2',
				value: '临时工'
			}]
			var index = typeOptions.findIndex(d => d.key == val);
			if(index > -1) {
				return typeOptions[index].value;
			}
		},

		filterStatus(val) {
			var isUpPosition = [{
				key: '0',
				value: '上线'
			}, {
				key: '1',
				value: '下线'
			}];
			var index = isUpPosition.findIndex(d => d.key == val);
			if(index > -1) {
				return isUpPosition[index].value;
			}
		}
	},

	data() {
		return {
			tableKey: 0,
			list: [],
			total: 0,
			listLoading: true,
			sortOptions: [
			{ label: "南京", key: "0" },
			{ label: "滁州", key: "1" },
			{ label: "昆山", key: "2" }
			],
			listQuery: {
				pageNum: 1,
				pageSize: 20,
				positionName: '',
			},
			textMap: {
				create: "新增职位",
				update: '编辑职位'
			},
			calendarTypeOptions,
			downloadLoading: false,
			dialogFormVisible: false,
			temp: {},
			rules: {},
			content: "",
			innerVisible: false,
			innerTemp: {},
			innerCurrentPage: 1,
			innerTotal: 5,
			innerList: [{
				tagName: '周周薪'
			}, {
				tagName: '活轻松'
			}, {
				tagName: '高工资'
			}, {
				tagName: '高补贴'
			}, {
				tagName: '包吃住'
			}],
			dialogStatus: '',
			seletedTags: [],
			dialogDetailVisible: false,
			tempDetail: {},
			seletedTagsTemp: [],
			isUpPosition: [{
				key: '0',
				value: '上线'
			}, {
				key: '1',
				value: '下线'
			}],
			typeOptions: [{
				key: '0',
				value: '高返费'
			}, {
				key: '1',
				value: '小时工'
			}, {
				key: '2',
				value: '临时工'
			}],
			enterpriseOptions: [],
			checkList: [],
			inputVisible: false,
			inputValue: '',
		};
	},
	created() {
		this.getList();
		this.getEnterPriseOptions();
		this.fetchPositionTagsAjax();
	},
	methods: {
		// 获取职位列表
		async getList() {
			this.listLoading = true;
			try {
				const result = await fetchPositionListAjax(this.listQuery);
				if(result.data.code == 0) {
					this.list = result.data.data.pageData;
					this.total = result.data.data.maxCount;
				}
				this.listLoading = false;
			} catch(err) {
				console.log(err);
				this.listLoading = false;
			}
		},

		// 获取公司列表
		async getEnterPriseOptions() {
			this.listLoading = true;
			try {
				const result = await fetchEnterPriseListAjax();
				result.data.data.forEach((item) => {
					this.enterpriseOptions.push({
						key: item.id,
						value: item.companyName,
					});
				});
				this.listLoading = false;
			} catch(err) {
				console.log(err);
				this.listLoading = false;
			}
		},

		// 获取标签列表
		async fetchPositionTagsAjax() {
			this.listLoading = true;
			try {
				const result = await fetchPositionTagsAjax();
				if(result.data.code == 0) {
					this.innerList = result.data.data;
				}
				this.listLoading = false;
			} catch(err) {
				console.log(err);
				this.listLoading = false;
			}
		},

		handleFilter() {
			this.listQuery.page = 1;
			this.getList();
		},

		handleCreate() {
			// this.resetTemp();
			this.temp = {};
			this.checkList = [];
			this.dialogStatus = "create";
			this.dialogFormVisible = true;
			this.$nextTick(() => {
				this.$refs["dataForm"].clearValidate();
			});
		},

		handelDelete(row) {
			this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.deletePosition(row.id);

			})
		},

		async deletePosition(id) {
			this.listLoading = true;
			try {
				await delPositionAjax({id: id});
				this.handleFilter();
				this.$message({
					type: 'success',
					message: '删除成功!'
				});
				this.listLoading = false;
			} catch(err) {
				console.log(err)
				this.listLoading = false;
			}
		},

		formatter(row) {
			var index = this.enterpriseOptions.findIndex(d => d.key == row.company_id);
			if(index > -1) {
				return this.enterpriseOptions[index].value;
			}
		},

		async createData() {
			this.listLoading = true;
			try {
				this.temp.positionTag = JSON.stringify(this.checkList);
				this.temp.positionSalaryRange = this.temp.min + '~' + this.temp.max;
				await addPositionAjax(this.temp);
				this.handleFilter();
				this.dialogFormVisible = false;
				this.listLoading = false;
			} catch(err) {
				this.listLoading = false;
				console.log(err)
			}
		},

		async updateData() {
			this.listLoading = true;
			try {
				this.temp.positionTag = JSON.stringify(this.checkList);
				this.temp.positionSalaryRange = this.temp.min + '~' + this.temp.max;
				await updatePositionAjax(this.temp);
				this.handleFilter();
				this.dialogFormVisible = false;
				this.listLoading = false;
			} catch(err) {
				this.listLoading = false;
				console.log(err)
			}
		},

		//选择标签
		selectMark() {
			this.innerVisible = !this.innerVisible;
		},

		goToDetail(data) {
			this.dialogDetailVisible = true;
			this.tempDetail = data;
			this.checkList = JSON.parse(this.tempDetail.positionTag);
			var index = this.enterpriseOptions.findIndex(d => d.key == this.tempDetail.company_id)
			this.tempDetail.companyShowName = this.enterpriseOptions[index].value;
		},

		//确认添加标志
		addTagsToPosition() {
			this.seletedTags = this.seletedTagsTemp;
			this.innerVisible = false;
		},

		//添加标志
		async addTag() {
			this.listLoading = true;
			try {
				await addPositionTagsAjax({
					tagName: this.inputValue
				});
				this.fetchPositionTagsAjax();
				this.inputVisible = false;
	        	this.inputValue = '';
			} catch(err) {
				console.log(err);
				this.listLoading = false;
			}
		},

		//删除标志
		deleteTag(row) {
			this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.deletePositionTag(row);
			})
		},

		async deletePositionTag(row) {
			this.listLoading = true;
			try {
				await delPositionTagsAjax(row);
				this.fetchPositionTagsAjax();
				var index = this.checkList.findIndex(d => d == row.tagName)
				if(index > -1) {
 					this.checkList.splice(index, 1);
				}
				this.$message({
					type: 'success',
					message: '删除成功!'
				});
				this.listLoading = false;
			} catch(err) {
				console.log(err);
				this.listLoading = false;
			}
		},

		handleSelectionChange(val) {
			debugger;
			this.seletedTagsTemp = val;
		},

		// 点击编辑
		handleUpdate(row) {
			this.temp = row;
			this.checkList = JSON.parse(this.temp.positionTag);
			if(this.temp.positionSalaryRange) {
				this.temp.max = this.temp.positionSalaryRange.split("~")[1];
				this.temp.min = this.temp.positionSalaryRange.split("~")[0];
			}
			this.dialogFormVisible = true;
			this.dialogStatus = 'update'
		},

		showInput() {
	        this.inputVisible = true;
	        this.$nextTick(_ => {
	          this.$refs.saveTagInput.$refs.input.focus();
	        });
      	},

      	deleteSelectedTag(index) {
      		this.checkList.splice(index, 1);
      	}
	}
};
</script>
<style type="text/css">
	.input-new-tag {
	    width: 90px;
	    margin-left: 10px;
	    vertical-align: bottom;
  	}
</style>
